<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表单设计</title>
  <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="css/site.css"/>
  <style>
   *{margin:0;padding:0;}
   body{font-family:"微软雅黑";font-size:14px;position:relative;}
   ul,li{list-style:none;}
   a{text-decoration:none;}
   #seal{width:800px;min-height:300px;margin:20px auto;}
   #seal h3{font-size:14px;}
   #seal .seal_box{width:100%;min-height:200px;border:1px solid #ddd;text-align:center; }
   #seal .seal_box p{overflow:auto;}
   #seal .seal_box p a{width:75px;text-decoration:none;line-height:30px;background:red;text-align:center;color:#fff;}
   #seal .seal_box p a:first-child{float:left;margin:15px 0 0 15px;}
   #seal .seal_box p a:last-child{float:right;margin:15px 15px 0 0;background:#333;}
   #seal  p a:hover{cursor:pointer;}
  #seal .seal_box .seal_list{text-align:center;margin-top:20px;}
  #seal .seal_box .seal_list tr{width:80px;height:35px;border:1px solid #ddd;}
  #seal .seal_box .seal_list tr td{width:80px;}
/*弹出框 样式 */
 #seal_add{width:800px;min-height:300px;border:1px solid #ddd;position:absolute;top:75%;left:21%;background:#fff;display:none;}
 #seal_add{width:800px;min-height:300px;margin:20px auto;}
   #seal_add h3{font-size:14px;}
   #seal_add .seal_box{width:100%;overflow:auto;border:1px solid #ddd;margin:0 auto; }
   #seal_add  p{overflow:auto;text-align:center;}
   #seal_add  p a{display:inline-block;width:75px;text-decoration:none;line-height:30px;background:red;text-align:center;color:#fff;}
   #seal_add  p a:first-child{margin-right:30px;}
   #seal_add  p a:last-child{background:#333;margin-left:30px;}
  #seal_add  p a:hover{cursor:pointer;}
  #seal_add .seal_box .seal_list{text-align:center;margin-top:20px;}
  #seal_add .seal_box .seal_list tr{width:80px;height:35px;border:1px solid #ddd;}
  #seal_add .seal_box .seal_list tr td{width:80px;}
  </style>  
    
 </head>
 <body>

  <div id="seal">
     <h3>*选择印章</h3>
     <div class="seal_box">
       <p><a id="add_seal_box">添加</a><a id="delete_seal">删除</a></p>
        <table class="seal_list" id="seal_list_add_box" border="1" width="95%">
           <tr>
              <td><input id="check_all_seal" type="checkbox" /></td>
              <td>印章名称</td>
              <td>印章保管人</td>
              <td>印章保管部门</td>
              <td>印章份数</td>
           </tr>
           </table>
        </div>
     </div>
  </div>
  <!-- 印章-弹出框-->
  <div id="seal_add">
     <h3>*选择印章</h3>
     <div class="seal_box">
        <table id="list_form" class="seal_list" border="1" width="95%">
           <tr>
              <td><input id="checkAll" type="checkbox"/></td>
              <td>序号</td>
              <td>印章名称</td>
              <td>印章保管人</td>
              <td>印章保管部门</td>
           </tr>  
             
           </table>
        </div>
        <p><a id="add_save">确定</a><a id="add_close">取消</a></p>
     </div>
  </div>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js?2028"></script>
<script type="text/javascript">
var seal_obj = new Array();//全局数组对象
 $(function(){
add_data_list();//初始化印章列表
data_list();//初始化添加印章列表

/*添加印章*/	 
$("#add_seal_box").click(function(){
	$("#checkAll").prop("checked",false);
	$('input[name="subBox"]').prop("checked",false);
	
	var display=$("#seal_add").css("display");
	if(display=="none"){
		$("#seal_add").css("display","block");	
	}else{
		$("#seal_add").css("display","none");
	}
});	



//全选全不选
$("#check_all_seal").click(function(){
	$('input[name="suitem"]').prop("checked",this.checked);	
});
var $suitem = $("input[name='suitem']");
$suitem.click(function(){
 $("#check_all_seal").prop("checked",$subBox.length == $("input[name='suitem']:checked").length ? true : false); 
});

//全选全不选
$("#checkAll").click(function(){
	$('input[name="subBox"]').prop("checked",this.checked);	
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
 $("#checkAll").prop("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false); 
});

/*删除印章 */
$("#delete_seal").click(function(){
	$("#seal_list_add_box  tr").each(function(i,j){
		var checkbox = $(this).find("input[name='suitem']");
		if($(checkbox).prop('checked')){
			var trId = $(this).attr("id");
			$('#'+trId).remove(); //此处删除调用外部接口删除表数据 
		}
	});
});

$("#add_save").click(function(){
		 var html = ''; 	
		$("#list_form  tr").each(function(i,j){
			if(i!=0){
			var checkbox = $(this).find("input[name='subBox']");
			alert(checkbox);
			if($(checkbox).prop('checked')){
				var trId = $(this).attr("id");
				var obj=new Object();
				 $('#'+trId).find('td').each(function(i,j){
					 if(i!=0){
						if(i==1){
						 obj.id = $(this).html();
						}
						if(i==2){
							 obj.name = $(this).html();
							}
						if(i==3){
							 obj.people = $(this).html();
							}
						if(i==4){
							 obj.dept = $(this).html();
							}
					 }
				 });
				 seal_obj.push(obj);
				 
			}
			}
		});
		add_data_list();
		$("#seal_add").css("display","none");//隐藏 
});

/*关闭弹出框 */
$("#add_close").click(function(){
	$("#seal_add").css("display","none");
});
});
 
 function data_list(){
	 //显示时清空缓存
	 //$("#list_form").empty().show();
	 var student = [{id:1,name:'印章二',people:'张三',dept:'工程一部'},{id:2,name:'印章三',people:'李四',dept:'工程二部'},{id:3,name:'印章二',people:'杰克',dept:'工程一部'}];
    var html;
	for(var i=0;i<student.length;i++){
		console.log(student[i].name);
	html+=' <tr id="tr'+student[i].id+'"> ';
	html+=' <td><input type="checkbox"  name="subBox" value='+student[i].id+' /></td>';
	html+=' <td>'+student[i].id+'</td>';
	html+=' <td>'+student[i].name+'</td>';
	html+=' <td>'+student[i].people+'</td>';
	html+=' <td>'+student[i].dept+'</td>';
	html+=' </tr> ';
	}
	 $("#list_form").append(html);
	
 }

/*添加印章*/
 function add_data_list(){
var html;
var data=seal_obj;
var student = [{id:1,name:'印章二',people:'张三',dept:'工程一部'},{id:2,name:'印章三',people:'李四',dept:'工程二部'},{id:3,name:'印章二',people:'杰克',dept:'工程一部'}];

if(data==""){
    //alert(student);
	data = student;
	console.log(data);
}else{
	data = data;
}

for(var i=0;i<data.length;i++){
console.log(data[i].dept);
html+='  <tr id="tr'+data[i].id+'"> ';
html+='  <td><input type="checkbox" name="suitem" value='+data[i].id+' /></td>';
html+='  <td>'+data[i].name+'</td> ';
html+='  <td>'+data[i].people+'</td> ';
html+='  <td>'+data[i].dept+'</td> ';
html+='  <td><input type="text" style="width:50px;height:25px"/></td> ';
html+='  </tr> '; 
}
$("#seal_list_add_box").append(html);
}
 
</script>
</body>
</html>

